<template>
  <div>
    <el-header height="64px" id="nav">
      <div class="container-xl p-0">
        <div class="navbar navbar-expand-lg">
          <div class="navbar-brand" style="font-size: 0px" href="/">
            <img :src="icon" height="40" />
          </div>

          <el-button type="primary" size="default" class="navbar-toggler" link :style="{ marginRight: '20px', }" @click="collapse.display === 'block'
            ? (collapse.display = 'none')
            : (collapse.display = 'block')
            ">
            <el-icon size="default">
              <Menu v-if="!collapse.display" />
              <CloseBold v-else />
            </el-icon>
          </el-button>

          <div class="collapse navbar-collapse" :style="collapse" id="navbarSupportedContent">
            <ul class="navbar-nav" :style="{ margin: '0 auto' }">
              <router-link v-if="checkDisableNav('首页')" :to="{ path: '/home' }" custom v-slot="{ navigate, isActive }">
                <li class="nav-item" :class="isActive ? 'active' : ''" @click="navigate">
                  <el-icon>
                    <HomeFilled />
                  </el-icon>
                  <span class="nav-item-title">&nbsp;首页</span>
                </li>
              </router-link>
              <router-link v-if="checkDisableNav('题库')" :to="routers.question" custom v-slot="{ navigate, isActive }">
                <li class="nav-item" :class="isActive ? 'active' : ''" @click="navigate">
                  <el-icon>
                    <Grid />
                  </el-icon>
                  <span class="nav-item-title">&nbsp;题库</span>
                </li>
              </router-link>
              <router-link v-if="checkDisableNav('题单')" :to="routers.questionbank" custom
                v-slot="{ navigate, isActive }">
                <li class="nav-item" :class="isActive ? 'active' : ''" @click="navigate">
                  <el-icon>
                    <List />
                  </el-icon>
                  <span class="nav-item-title">&nbsp;专题</span>
                </li>
              </router-link>
              <router-link v-if="checkDisableNav('任务')" :to="routers.task" custom v-slot="{ navigate, isActive }">
                <li class="nav-item" :class="isActive ? 'active' : ''" @click="navigate">
                  <el-icon>
                    <Checked />
                  </el-icon>
                  <span class="nav-item-title">&nbsp;任务</span>
                </li>
              </router-link>
              <router-link v-if="checkDisableNav('比赛')" :to="routers.activity" custom v-slot="{ navigate, isActive }">
                <li class="nav-item" :class="isActive ? 'active' : ''" @click="navigate">
                  <!-- <el-icon>
                    <TrophyBase />
                  </el-icon> -->
                  <el-icon>
                    <Flag />
                  </el-icon>
                  <span class="nav-item-title">&nbsp;比赛</span>
                </li>
              </router-link>
              <!-- 是老师 则根据admin配置否则 根据mgmt配置 -->
              <router-link v-if="isAdmin ? checkDisableNav('评测') : routerNames.find(e => e === '评测')"
                :to="routers.assessment" custom v-slot="{ navigate, isActive }">
                <li class="nav-item" :class="isActive ? 'active' : ''" @click="navigate">
                  <el-icon>
                    <TrendCharts />
                  </el-icon>
                  <span class="nav-item-title">&nbsp;评测</span>
                </li>
              </router-link>
              <!-- saas云课堂 -->
              <!-- <li class="nav-item" v-if="!update && !isHGKJteam" @click="goToYkt">
                <el-icon>
                  <Platform />
                </el-icon>
                <span class="nav-item-title">&nbsp;云课堂</span>
              </li> -->
              <router-link v-if="checkDisableNav('云课堂') || !update" :to="routers.cloudClass" custom
                v-slot="{ navigate, isActive }">
                <li class="nav-item" :class="isActive ? 'active' : ''" @click="navigate">
                  <el-icon>
                    <Platform />
                  </el-icon>
                  <span class="nav-item-title">&nbsp;云课堂</span>
                </li>
              </router-link>
              <!-- 管理 -->
              <li class="nav-item" v-if="checkDisableNav('管理') && isAdmin" @click="goToMgmt">
                <el-icon>
                  <Management />
                </el-icon>
                <span class="nav-item-title">&nbsp;管理</span>
              </li>

              <router-link :to="{ name: '科学中心' }" custom v-slot="{ navigate }" v-if="update">
                <li class="nav-item" @click="navigate">
                  &nbsp;大数据
                </li>
              </router-link>
            </ul>

            <div class="d-flex">
              <div class="navbar-nav mr-auto">
                <div class="nav-item">
                  <!--  v-removeAriaHidden -->
                  <el-dropdown @command="handleCommand">
                    <div class="avater-h nav-item-title">
                      <el-avatar style="transform: translateY(7px)" size="small" :src="circleUrl"></el-avatar>
                      <span class="avater-name hov" v-text="myName"></span>
                    </div>
                    <template #dropdown>
                      <el-dropdown-menu>
                        <el-dropdown-item v-if="checkDisableUserMenu('个人中心')" command="u">个人中心</el-dropdown-item>
                        <el-dropdown-item v-if="checkDisableUserMenu('管理我的题目')" command="a">管理我的题目</el-dropdown-item>
                        <!-- <el-dropdown-item command="c">测试点贡献查询</el-dropdown-item> -->
                        <!-- v-if="!update" -->
                        <el-dropdown-item class="tmp111" command="d" divided>修改个人信息</el-dropdown-item>
                        <el-dropdown-item command="b">退出</el-dropdown-item>
                      </el-dropdown-menu>
                    </template>
                  </el-dropdown>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </el-header>
    <el-dialog v-model="dialogVisible" class="" width="550px">
      <template #header>
        <span class="icon-text el-dialog__header-title">
          <el-icon class="text-primary">
            <Guide />
          </el-icon>
          {{ name }}
        </span>
      </template>
      <div class="row justify-content-md-center text-login">
        <div class="col">
          <!-- <h4 v-text="name" :class="name == '登录' ? 'text-center' : ''"></h4> -->
        </div>
      </div>
      <div id="navel-dialog" class="row justify-content-md-center text-body">
        <div class="col" v-show="name == '登录'">
          <el-form ref="formref" :model="form" label-width="95px" size="default" label-position="left">
            <el-form-item class="text-item text-center" label-width="0">
              <img style="transform: translateX(10px)" width="80" class="headimage"
                src="https://cdn-hterobot.oss-cn-qingdao.aliyuncs.com/JOY/headportrait/head9.jpg" />
            </el-form-item>
            <el-form-item label="团队ID">
              <el-input placeholder="团队ID" name="teamid" v-model="form.teamid"></el-input>
            </el-form-item>
            <el-form-item class="text-item" label="账号/手机号">
              <el-input placeholder="账号/手机号" name="phonenum" v-model="form.phonenum"></el-input>
            </el-form-item>
            <el-form-item label="密码">
              <el-input placeholder="密码" name="password" type="password" v-model="form.password"></el-input>
            </el-form-item>
            <div class="text-right pu" @click="name = '忘记密码'">找回/修改密码</div>
            <el-form-item label-width="0">
              <div class="row m-0 p-0">
                <div class="col">
                  <button class="btn d-block btn-login" type="button" @click="login">登录</button>
                </div>
                <div class="col">
                  <button class="btn d-block btn-login" type="button" @click="name = '注册'">用户注册</button>
                </div>
              </div>
            </el-form-item>
          </el-form>
        </div>

        <div class="col" v-show="name == '忘记密码'">
          <el-form ref="forgetref" :model="forget" label-width="95px" size="default" label-position="left">
            <el-form-item class="text-item text-center" label-width="0">
              <img style="transform: translateX(10px)" width="80" class="headimage"
                src="https://cdn-hterobot.oss-cn-qingdao.aliyuncs.com/JOY/headportrait/head9.jpg" />
            </el-form-item>
            <el-form-item class="text-item" label="手机号：" prop="phonenum">
              <el-input placeholder="请输入手机号" name="phonenum" v-model="forget.phonenum"></el-input>
            </el-form-item>
            <el-form-item class="text-item" label="验证码：" prop="yzm">
              <div class="row m-0">
                <div class="col p-0">
                  <el-input placeholder="四位验证码" v-model="forget.yzm"></el-input>
                </div>
                <div class="col pr-0">
                  <button style="height: 30px; border: 0px" class="d-block btn-login border-light"
                    @click.stop.prevent="forgetSendCode" :disabled="time2 !== 60"
                    v-text="time2 == 60 ? '验证码' : time2"></button>
                </div>
              </div>
            </el-form-item>
            <el-form-item class="text-item" label="新密码：" prop="password">
              <el-input placeholder="请输入新密码" name="newpassword" type="password" v-model="forget.password"></el-input>
            </el-form-item>
            <el-form-item class="text-item" label-width="0">
              <div class="row m-0 p-0">
                <div class="col p-0 text-right">
                  <button class="btn btn-login d-block" type="button" @click="forgetpassword">修改密码</button>
                </div>
              </div>
            </el-form-item>
          </el-form>
        </div>
        <el-dialog width="" class="el-dialog-z-1" v-model="innerVisible">
          <template #header>
            <span class="icon-text el-dialog__header-title">
              <el-icon class="text-primary">
                <Guide />
              </el-icon>
              选择头像
            </span>
          </template>
          <div>
            <img :src="im" class="headimage" @click="register.headportrait = im;
            userInfoForm.headportrait = im;
            innerVisible = false;
            " v-for="im in headimage " :key="im" />
          </div>
        </el-dialog>

        <div class="col" v-show="name == '注册'">
          <el-form ref="registerref" :rules="registerrole" :model="register" label-width="95px" size="default"
            label-position="left">
            <el-form-item class="text-item cu" @click=" innerVisible = true" label-width="0">
              <img :src="register.headportrait" class="headimage" width="80" />
              &nbsp;&nbsp;&nbsp;点击图片修改头像
            </el-form-item>
            <el-form-item class="text-item" label="手机号：" prop="phonenum">
              <el-input placeholder="请输入手机号" name="phonenum" v-model="register.phonenum"></el-input>
            </el-form-item>
            <el-form-item class="text-item" label="验证码：" prop="yzm">
              <div class="row m-0">
                <div class="col p-0">
                  <el-input placeholder="请输入验证码" v-model="register.yzm"></el-input>
                </div>
                <div class="col pr-0">
                  <button style="height: 30px; border: 0px" class="d-block btn-login border-light"
                    @click.stop.prevent="registerSendCode" :disabled="time !== 60"
                    v-text="time == 60 ? '验证码' : time"></button>
                </div>
              </div>
            </el-form-item>
            <el-form-item class="text-item" label="密码：" prop="password">
              <el-input type="password" name="password" placeholder="请输入密码" v-model="register.password"></el-input>
            </el-form-item>

            <el-form-item class="text-item">
              <el-input placeholder="请输入用户名" aria-label="用户名：" name="name" v-model="register.name"></el-input>
            </el-form-item>
            <el-form-item class="text-item" label-width="0">
              <div class="row m-0 p-0">
                <div class="col p-0">
                  <button class="btn btn-login d-block" type="button" @click="registersubmit">注册</button>
                </div>
              </div>
            </el-form-item>
          </el-form>
        </div>

        <div class="col" :style="{ marginTop: '0px' }" v-show="name == '修改个人信息'">
          <el-form class="fix-form" ref="registerref" :model="userInfoForm" label-width="80px" size="default"
            label-position="left">
            <div class="form-item-title"> 个人信息 </div>
            <el-form-item class="text-item cu" @click=" innerVisible = true" label-width="0">
              <div class="icon-text">
                <el-avatar :src="userInfoForm.headportrait ? userInfoForm.headportrait : (getuser ? getuser.headportrait : 'https://cdn-hterobot.oss-cn-qingdao.aliyuncs.com/JOY/headportrait/head9.jpg')
                  " class="headimage" :style="{ width: '56px', height: '56px', marginRight: '24px' }"
                  width="56"></el-avatar>
                <span>点击修改个人头像</span>
              </div>
            </el-form-item>
            <el-form-item class="text-item" label="用户名：" prop="name">
              <el-input size="default" type="text" placeholder="请输入用户名" v-model.trim="userInfoForm.name"></el-input>
            </el-form-item>
            <el-form-item class="text-item" label-width="0">
              <el-button class="fix-info-button" type="primary" size="default" @click="changeUser">
                修改个人信息
              </el-button>
            </el-form-item>
            <div class="form-item-title"> 修改密码 </div>
            <el-form-item class="text-item" label="原密码：" prop="password">
              <el-input size="default" type="password" show-password name="password" placeholder="请输入原始密码"
                v-model="userInfoForm.password">
              </el-input>
            </el-form-item>
            <el-form-item class="text-item" label="新密码：" prop="password1">
              <el-input size="default" type="password" show-password name="password" placeholder="请输入新密码"
                v-model="userInfoForm.password1">
              </el-input>
            </el-form-item>
            <!-- <el-form-item class="text-item" prop="phonenum" label="手机号：">
              <el-input size="default" placeholder="请输入手机号" name="phonenum" v-model="userInfoForm.phonenum"></el-input>
            </el-form-item> -->
            <el-form-item class="text-item" label-width="0">
              <el-button class="fix-info-button" type="primary" size="default" @click="changepassword">
                修改密码
              </el-button>
            </el-form-item>
          </el-form>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script setup lang='ts'>
import { CloseBold, Menu } from '@element-plus/icons-vue';
import { ElForm, ElMessage, ElMessageBox } from "element-plus";
import { computed, onMounted, reactive, ref, watch } from "vue";
import { useStore } from "vuex";
import {
  asyncaddteamlog,
  asyncchangepassword,
  asyncchangeuser,
  asynccreateteam,
  asyncgetregistphoneVerificationCode,
  asynclogin,
  asynclogout,
  asyncresetpassword,
  asyncuserregist,
  selectteamrole
} from "../api";
import { Storekey } from "../interface";
import Studycodemodel from "../mysql_interface/studycodemodel";
import { adminTeamId } from '../util/data';
import { isPhonenum } from "../util/RegExp";
import headimage from "./data/headimage";
import * as routers from "./data/router";
import router from './router';
const dialogVisible = ref(false)
const dialogVisibleteam = ref(false)
const collapse = reactive<Record<string, any>>({})
const teamselect = ref<Studycodemodel.Iteam[]>([])
const time = ref(60)
const time2 = ref(60)
const p = defineProps<{ icon: string, myteam: Studycodemodel.Iteam, update?: boolean, href?: string }>()

const dropdownref = ref()

const navRouteNames = ["首页", "题库", "题单", "任务", "比赛", "评测", "云课堂", "管理"];

const userInfoForm = reactive({
  name: '',
  password: "",
  password2: "",
  password1: "",
  headportrait: "",
  phonenum: ""
})
const form = reactive({
  teamid: "",
  password: "",
  phonenum: "",
})
const register = reactive({
  phonenum: "",
  password: "",
  yzm: "",
  headportrait: headimage[9],
  name: "",
})
const forget = reactive({
  phonenum: "",
  password: "",
  yzm: "",
})
const teamForm = reactive<Record<string, any>>({
  userid: 0,
  username: "",
  type: "申请",
  context: "",
})
const name = ref('登录')

const registerrole = {
  phonenum: [
    {
      message: "手机号不合法",
      regexp: isPhonenum,
      trigger: "blur",
    },
  ],
  password: [
    {
      min: 4,
      max: 25,
      message: "长度在 3 到 25 个字符",
      trigger: "blur",
    },
  ],
  yzm: [{ required: true, message: "请输入验证码", trigger: "blur" }],
}
const teamrules = {
  teamid: [{ required: true, message: "请选择团队", trigger: "blur" }],
}
const innerVisible = ref(false)

const store = useStore(Storekey)
const getuser = computed(() => {
  return store.state.user || {}
})
const getteam = computed(() => {
  return store.state.team?.rows || []
})
const isAdmin = computed(() => {
  return getuser.value?.isAdmin
})
const myName = computed(() => {
  if ((getuser?.value?.name?.length || 0) > 5) {
    return getuser?.value?.name?.substring(0, 5) + '...'
  }
  return getuser?.value?.name
})
const circleUrl = computed(() => {
  if (getuser.value) return getuser.value.headportrait;
  return "https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png";
})

// admin 控制 导航隐藏、个人中心隐藏
const disabledNav = computed(() => {
  return p.myteam.other?.disabledNav || []
})
const disabledUserMenu = computed(() => {
  return p.myteam.other?.disabledUserMenu || []
})
function checkDisableNav(name: string) {
  return !disabledNav.value.includes(name)
}
function checkDisableUserMenu(name: string) {
  return !disabledUserMenu.value.includes(name)
}
watch(() => p.myteam.other, (o, v) => {
  // 如果 disabledNav数组 没变化则不跳转
  if (JSON.stringify(o) === JSON.stringify(v)) return
  // 获取当前路由信息
  const currentRoute = router.currentRoute.value;
  const currentRouteName = currentRoute.name as string;

  // 只处理导航标签页的路由
  if (!navRouteNames.includes(currentRouteName)) return;

  // 如果当前导航标签页被禁用
  if (!checkDisableNav(currentRouteName)) {
    // 获取可访问的导航标签页
    const availableRoutes = navRouteNames.filter(v => checkDisableNav(v));

    // 跳转到第一个有效路由
    if (availableRoutes.length > 0) {
      router.push({ name: availableRoutes[0] });
    }
  }
  // 跳转 admin配置的导航中能够访问的第一个
  // if (disabledNav.value.length !== 0) {
  //   const routerName = ["首页", "题库", "题单", "任务", "比赛", "评测", "云课堂", "管理"]
  //   const routes = routerName.filter((v) => checkDisableNav(v)) 
  //   router.push({ name: routes[0] })
  // }
})

// 登录管理后台
function goToMgmt() {
  const { origin, pathname } = window.location;
  window.open(`${origin}/saasMgmt`)
}
function goToYkt() {
  // 跳转云课堂
  const { origin, pathname } = window.location;
  const url = `${origin}/stemhome?id=${getuser?.value.ID}&teamid=${getuser?.value.teamid}`
  window.open(url)
}
// isHGKJteam
const isHGKJteam = computed(() => {
  return getuser?.value.teamid === adminTeamId
})

// 获取权限
const roleName = "学生"
const routerNames = ref<any[]>([])
async function getPermissionsCfg() {
  const { count, rows } = await selectteamrole({
    teamid: getuser.value.teamid, name: roleName
  })
  // 可能存在多条
  routerNames.value = rows[0]?.routername || []
}
onMounted(() => {
  // getPermissionsCfg();
  // handleCommand('d')
  // 获取当前路由信息
  const currentRoute = router.currentRoute.value;
  const currentRouteName = currentRoute.name as string;

  // 只处理导航标签页的路由
  if (!navRouteNames.includes(currentRouteName)) return;

  // 如果当前导航标签页被禁用
  if (!checkDisableNav(currentRouteName)) {
    // 获取可访问的导航标签页
    const availableRoutes = navRouteNames.filter(v => checkDisableNav(v));

    // 跳转到第一个有效路由
    if (availableRoutes.length > 0) {
      router.push({ name: availableRoutes[0] });
    }
  }
  // if (disabledNav.value.length !== 0) {
  //   const routerName = ["首页", "题库", "题单", "任务", "比赛", "评测", "云课堂", "管理"]
  //   const routes = routerName.filter((v) => checkDisableNav(v))
  //   console.log("onMounted routerNames.value", routes)
  //   router.push({ name: routes[0] })
  // }
});

async function handleCommand(co: string) {
  switch (co) {
    case "a":
      router.push({ name: "题库", query: { tabName: 'user', } });
      break;
    case "b":
      await asynclogout();
      router.push({
        name: "登录",
      });
      await store.dispatch('actiononline')
      break;
    case "c":
      router.push({
        name: "贡献测试点查询",
      });
      break;
    case "u":
      router.push({ name: "用户", });
      break;
    case "d":
      dialogVisible.value = true;
      name.value = "修改个人信息";
      break;
    default:
  }
}

function shoudialogVisible(name1: string) {
  dialogVisible.value = true;
  if (name1) {
    name.value = name1;
  }
}

async function login() {
  const { phonenum, password, teamid } = form;
  try {
    await asynclogin({ ID: phonenum, password, teamid });
    location.reload()
    await store.dispatch('actiononline')
    dialogVisible.value = false;
    ElMessage.success("登录成功");
  } catch (e: any) {
    ElMessage.error(String(e));
  }
}

async function registerSendCode() {
  const { phonenum } = register;
  if (time.value !== 60) return;
  if (isPhonenum.test(phonenum)) {
    await asyncgetregistphoneVerificationCode(phonenum);
    const x = setInterval(() => {
      time.value = time.value - 1
      if (time.value == 0) {
        clearInterval(x);
        time.value = 60;
      }
    }, 1000);
  }
}
async function forgetSendCode() {
  const { phonenum } = forget;
  if (time2.value !== 60) return;
  if (isPhonenum.test(phonenum)) {
    await asyncgetregistphoneVerificationCode(phonenum);
    const x = setInterval(() => {
      time2.value = time2.value - 1;
      if (time2.value == 0) {
        clearInterval(x);
        time2.value = 60;
      }
    }, 1000);
  }
}
async function changepassword() {
  try {
    await asyncchangepassword(userInfoForm);
    ElMessage.success("修改密码成功");
    dialogVisible.value = false;
  } catch (e: any) {
    ElMessage.error(e);
  }
}
async function changeUser() {
  try {
    await asyncchangeuser(userInfoForm);
    ElMessage.success("修改个人信息成功");
    await store.dispatch('actiononline')
    dialogVisible.value = false;
  } catch (e: any) {
    ElMessage.error(e);
  }
}

const forgetref = ref<typeof ElForm>()
async function forgetpassword() {
  forgetref.value?.validate(async (valid: any) => {
    if (valid) {
      try {
        await asyncresetpassword(forget);
        ElMessage.success("修改个人信息成功");
        await asynclogin({
          ID: forget.phonenum,
          password: forget.password,
        });
        await store.dispatch('actiononline')
        dialogVisible.value = false;
      } catch (e: any) {
        ElMessage.error(e);
      }
    } else {
      return false;
    }
  });
}

function handleCommand2(co: string) {
  dropdownref.value?.handleClose()
  switch (co) {
    case "a":
      if (!getuser.value) {
        shoudialogVisible('登录');
      } else {
        if (
          getteam.value.filter((v) => v.userid === getuser.value?.ID).length >
          4
        ) {
          ElMessage.warning("创建团队数上限为5");
          return;
        }

        ElMessageBox.prompt("请输入名称", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
        }).then(({ value }) => {
          if (value) {
            asynccreateteam({ name: value })
              .then((e) => {
                if (e.ID) {
                  router.push({
                    name: "团队",
                    params: {
                      ID: e.ID,
                    },
                  });
                }
              })
              .catch((e) => {
                ElMessage.error(e);
              });
          }
        });
      }
      break;
    case "b":
      dialogVisibleteam.value = true;
      break;
    default:
      return
  }
}
const ruleFormteam = ref<typeof ElForm>()

async function submitForm(name: string) {
  const t = ruleFormteam.value

  t?.validate(async (v: any) => {
    if (v) {
      await asyncaddteamlog(teamForm)
        .then(() => {
          ElMessage.success("提交成功");
          dialogVisibleteam.value = false;
        })
        .catch((e) => {
          ElMessage.warning(e);
        });
    }
  });
}

const registerref = ref()

async function registersubmit() {
  registerref.value.validate(async (valid: any) => {
    if (valid) {
      try {
        await asyncuserregist(register);
        ElMessage.success("注册成功");
        await store.dispatch('actiononline')
        dialogVisible.value = false;
        location.reload()
      } catch (e: any) {
        ElMessage.error(e);
      }
    } else {
      return false;
    }
  });
}

watch(() => getuser.value, (e) => {
  if (e) {
    userInfoForm.name = e.name ? e.name : ''
    getPermissionsCfg();
  }
})

defineExpose({
  shoudialogVisible,
  handleCommand,
  handleCommand2
})

</script>

<style scoped>
/* ojSass */
#nav {
  background-color: #fff;
  left: 0px;
  top: 0px;
  margin: 0 auto;
  width: 100%;
  z-index: 10;
  box-shadow: 0px 3px 6px rgba(114, 114, 114, 0.16);
}

/*ojSass 头像 */
.hov:hover {
  color: #3b5fdd;
}

/* ojSass */
#nav .active {
  color: #3b5fdd;
  border-bottom: 4px solid #3b5fdd
}


/* ojSass */
.nav-item {
  border-bottom: 4px solid transparent;
  display: inline-flex;
  align-items: center;
  /* flex-wrap: wrap; */
  /* align-content: flex-end; */
  box-sizing: border-box;
  font-family: PingFangSC-Semibold;
  /* width: 80px; */
  text-align: center;
  font-size: 16px;
  /* font-weight: bolder; */
  padding: 0 18px;
  cursor: pointer;

  line-height: 64px;
  height: 64px;
  color: rgba(51, 51, 51, 1);
  text-decoration: none;
  position: relative;
}

.nav-item-title {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#nav .navbar {
  padding: 0;
  height: 64px;
  line-height: 64px;
}

#nav .navbar-brand {
  min-width: 180px;
  height: 64px;
  padding-top: 15px;
  padding-bottom: 15px;
  text-align: center;
  margin: 0;
}

#nav .navbar-brand img {
  margin: 0 auto;
  display: block;
}

#nav .img {
  height: 1.1rem;
  width: 1.1rem;
  vertical-align: baseline;
}

#nav .icon {
  font-size: 1.25rem;
}

/*ojSass nav-tabs */
.nav-item:hover {
  color: #3b5fdd;
}

/*ojSass 云课堂 */
.nav-item:hover a {
  color: #3b5fdd !important;
}

.router-link-exact-active {
  color: var(--color-cheng);
}

.el-icon-bell {
  font-size: 24px;
}

.headimages {
  height: 80px;
  line-height: 80px;
}

.headimages-item {
  display: inline-block;
  width: 50px;
  height: 50px;
}

.imageright {
  margin-right: -35px;
}

.imageleft {
  margin-left: -35px;
}

.imagecenter {
  z-index: 20;
}

.avater-name {
  display: inline-block;
  color: rgba(51, 51, 51, 1);
  margin-left: 10px;
}

.headimages img {
  width: 50px;
  height: 50px;
}

.avater-h {
  line-height: 64px;
}

.avater-h:focus-visible {
  outline: none !important;
}

.head-left {
  margin-right: -25px;
}

.head-center {
  z-index: 10;
}

.head-right {
  margin-left: -25px;
}

.headimages img:hover {
  width: 75px;
  height: 75px;
  z-index: 10;
}

.pu {
  cursor: pointer;
  color: var(--color-909399);

  line-height: 15px;
  margin-bottom: 20px;
}

.image {
  width: 75px;
  height: 75px;
}

.text-login {
  margin-bottom: 3px;
  margin-top: 3px;
}

.text-login h4 {
  text-align: center;
  font-size: 28px;
  font-weight: 650;
  color: var(--color-606266);
}

.text-body .col-6 {
  min-height: 400px;
}

.fix-form {
  padding: 0 50px;
}

.form-item-title {
  text-align: left;
  font-weight: bolder;
  margin: 20px 0;
  font-size: 16px;
}

.icon-text {
  display: inline-flex;
  align-items: center;
}

.fix-info-button {
  width: 50%;
  margin: 0 25%;
  height: 40px;
  font-size: 16px;
  border-radius: 4px !important;
  color: #fff;
}

.fix-info-button:hover {
  color: #fff;
  border-color: transparent !important;
}

.btn {
  height: 40px;
  font-size: 18px;
  border-width: 1px;
  border-style: solid;
  border-radius: 4px;
}

.btn-login {
  background: var(--color-43);
  border-radius: 2px !important;
  color: #fff;
}

.btn-login:hover {
  color: #fff;
  border-color: transparent !important;
}

.text-item {
  margin-bottom: 28px;
}

.p-1 {
  font-size: 14px;
}

.nav-item-name {
  line-height: 64px;
}

.headimage {
  width: 80px;
  height: 80px;
  background: rgba(0, 0, 0, 0);
  box-shadow: 0px 3px 20px rgba(0, 0, 0, 0.08);
  border-radius: 50%;
  cursor: pointer;
}

.d-block {
  width: 100%;
}

/*  */
#nav .navbar-collapse {
  background-color: #fff;
  width: auto;
  z-index: 99;
}
</style>


<style>
.el-dialog-z {
  background-repeat: no-repeat !important;
  background-position: left !important;
  border: 0px;
  background-size: 464px 100% !important;
  background-color: rgba(255, 255, 255, 1) !important;
  min-height: 530px;
}

.el-dialog-z .icon {
  font-size: 1rem;
}

.el-dialog-z .el-dialog__header {
  padding: 0;
}

#navel-dialog .el-form-item__content {
  display: block;
}

.el-dialog-z-1 {
  height: auto;
}

.el-dialog-z-1 img {
  margin-left: 20px;
  margin-right: 20px;
  margin-bottom: 20px;
}

#nav .el-badge {
  vertical-align: initial;
}

#nav .el-dropdown {
  color: #212529;
}

.tmp111:before {
  /* display: none !important; */
}
</style>